<template>
  <div>
    <div class="table-page-search-wrapper">
      <el-form :inline="true" :model="searchModel" size="small">
        <el-form-item label="归还人">
          <el-input v-model="searchModel.returner" placeholder="归还人"></el-input>
        </el-form-item>
        <el-form-item label="归还公司">
          <el-input v-model="searchModel.companyName" placeholder="归还公司"></el-input>
        </el-form-item>
        <el-form-item label="归还时间">
          <el-row>
            <el-col class="dateCol" :span="10">
              <el-date-picker type="date" placeholder="开始时间" value-format="yyyy-MM-dd" v-model="searchModel.returnDate_begin" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col align="center" :span="1">~</el-col>
            <el-col class="dateCol" :span="10">
              <el-date-picker type="date" placeholder="结束时间" value-format="yyyy-MM-dd" v-model="searchModel.returnDate_end" style="width: 100%;"></el-date-picker>
            </el-col>
          </el-row>
        </el-form-item>
        <template v-if="toggleSearchStatus">

        </template>
        <el-form-item>
                <span style="float: left;overflow: hidden;" class="">
                    <el-button type="primary" @click="searchQuery" icon="el-icon-search">查询</el-button>
                    <el-button type="primary" @click="searchReset" icon="el-icon-refresh" style="margin-left: 8px">重置
                    </el-button>

                    <el-button @click="handleToggleSearch()" type="text" size="small">
                        {{ toggleSearchStatus ? '收起' : '展开' }}
                        <i :class="toggleSearchStatus ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                    </el-button>
                </span>
        </el-form-item>
      </el-form>
    </div>

    <el-table ref="multipleTable"
              border
              highlight-current-row
              size="small"
              style="width: 100%"
              v-loading="loading"
              :data="dataSource"
              @row-click="rowClick"
              :header-cell-style="{background:'#eef1f6',color:'#606266'}"
              :default-sort = "{prop: 'inboundDate', order: 'descending'}">
      <el-table-column align="center" label="#"  width="55">
        <template slot-scope="scope">
          <el-radio v-model="singleSelRowKey" :label="scope.row.id">&nbsp;</el-radio>
        </template>
      </el-table-column>
      <el-table-column prop="companyName" label="归还公司"></el-table-column>
      <!--      <el-table-column prop="locationBuilding" label="所属建筑"></el-table-column>-->
      <!--      <el-table-column prop="locationFloor" label="所属楼层"></el-table-column>-->
      <el-table-column prop="returner" label="归还人"></el-table-column>
      <el-table-column prop="telphone" label="联系电话"></el-table-column>
      <el-table-column prop="returnDate" label="归还日期"></el-table-column>
<!--      <el-table-column label="操作类型">-->
<!--        <template slot-scope="scope">-->
<!--          {{ ['领用','转移','续期'][scope.row.type-1] }}-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column  width="150" fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click="handleDetail(scope.row)" type="text">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      :total="ipagination.total"
      :page.sync="ipagination.current"
      :limit.sync="ipagination.pageSize"
      @pagination="loadData"
    ></pagination>
    <el-tabs value="first">
      <el-tab-pane label="资产明细" name="first">
        <!-- 领用明细 -->
       <return-items ref="item"></return-items>
      </el-tab-pane>
    </el-tabs>
    <!-- 弹窗 -->
    <return-modal ref="modalForm"></return-modal>
<!--    <use-modal ref="modalForm"></use-modal>-->
  </div>
</template>

<script>
  import { SingleTableMixins } from '@/mixins/SingleTableMixins'
  import Pagination from '@/components/Pagination'
  import ReturnModal from '../modules/ReturnModal'
  import ReturnItems from './returnItems'

  export default {
    mixins: [ SingleTableMixins ],
    components: { ReturnItems, ReturnModal,   Pagination},
    name: 'returnRecordList',
    data(){
      return {
        url:{
          list: "/retrocede/list"
        },
        ipagination:{
          pageSize: 10,
          current:1,
          total: 0,
        }
      }
    },
    methods:{
      // 表单选择
      selectChange(e){
        this.$refs.item.getDataByMain(this.singleSelRowKey,this.singleSelRows);
      },
    }
  }
</script>

<style scoped>

</style>
